/**
* Created by wust on 2020-04-26 08:54:23.
*/
<template>
  <div id="data-source" v-loading="loading">
    <el-tabs v-model="editableTabsValue" @tab-remove="removeTab">
      <el-tab-pane :name="defaultActiveName" label="默认数据源列表">
        <data-source-search-bar v-on:search="search"></data-source-search-bar>
        <el-button-group style="margin-bottom: 7px;float: left;">
          <el-button size="mini" type="primary" @click="updateJdbc" v-has-permission="'DataSourceList.updateJdbc'" icon="el-icon-edit">配置数据源</el-button>
          <el-button size="mini" type="primary" @click="databaseSharding" v-has-permission="'DataSourceList.databaseSharding'" icon="el-icon-edit">数据库分片规则</el-button>
          <el-button size="mini" type="primary" @click="tableSharding" v-has-permission="'DataSourceList.tableSharding'" icon="el-icon-s-tools">数据表分片规则</el-button>
          <el-button size="mini" type="primary" @click="databaseSharding1" v-has-permission="'DataSourceList.databaseSharding1'" icon="el-icon-s-tools">水平库分片配置</el-button>
        </el-button-group>
        <el-table border size="mini" :data="baseDto.lstDto" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column type="expand" label="更多">
            <template slot-scope="props">
              <div class="my-detail">
                 <el-row :gutter="20">
                   <el-col :span="3"><label>数据源地址:</label></el-col>
                   <el-col :span="5">{{props.row.jdbcUrl }}</el-col>
                 </el-row>
                 <el-row :gutter="20">
                   <el-col :span="3"><label>驱动类:</label></el-col>
                   <el-col :span="5">{{props.row.jdbcDriver }}</el-col>
                 </el-row>
                 <el-row :gutter="20">
                   <el-col :span="3"><label>描述:</label></el-col>
                   <el-col :span="5">{{props.row.description }}</el-col>
                 </el-row>
                 <el-row :gutter="20">
                   <el-col :span="3"><label>最后更新人:</label></el-col>
                   <el-col :span="5">{{props.row.modifyName }}</el-col>
                 </el-row>
                 <el-row :gutter="20">
                   <el-col :span="3"><label>最后更新时间:</label></el-col>
                   <el-col :span="5">{{props.row.modifyTime }}</el-col>
                 </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="数据源名称" prop="name" width="180">
          </el-table-column>
          <el-table-column label="数据源组" prop="groupName" width="180">
          </el-table-column>
          <el-table-column label="数据源类型" prop="masterSlave" width="180">
          </el-table-column>
          <el-table-column label="分片列" prop="shardingColumn" width="180">
          </el-table-column>
          <el-table-column label="创建时间" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" prop="createrName" width="180">
          </el-table-column>
        </el-table>
        <el-pagination @size-change="pageSizeChange" @current-change="pageIndexChange" :current-page="searchModel.pageDto.pageNum"
          :page-sizes="searchModel.pageDto.pageSizes" :page-size="searchModel.pageDto.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="baseDto.page.total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane v-for="(item) in editableTabs" :key="item.key" :label="item.label" :name="item.name" closable>
        <data-source-create v-if="item.key == 'create'"></data-source-create>
        <data-source-update v-if="item.key == 'update'" v-bind:selectedModel="selectedModel"></data-source-update>
      </el-tab-pane>
    </el-tabs>
    <el-drawer
      title="配置数据源"
      size="40%"
      :visible.sync="dialogVisible1"
      direction="rtl"
      :before-close="handleClose">
      <data-source-update-jdbc v-if="dialogVisible1" v-bind:selectedModel="selectedModel"></data-source-update-jdbc>
    </el-drawer>
    <el-dialog title="数据库分片规则" :visible.sync="dialogVisible3" width="40%">

    </el-dialog>
    <el-dialog title="水平库分片配置" :visible.sync="dialogVisible4" width="40%">

    </el-dialog>
    <el-dialog title="数据表分片规则" :visible.sync="dialogVisible5" width="40%">

    </el-dialog>
  </div>
</template>
<script>
  import Vue from 'vue'
  import DataSourceCreate from './data-source-create'
  import DataSourceUpdateJdbc from './data-source-update-jdbc'
  import DataSourceSearchBar from './data-source-search-bar'

  export default {
    name: 'data-source-list',
    components: {
      DataSourceSearchBar,
      DataSourceUpdateJdbc,
      DataSourceCreate
    },
    data() {
      return {
        loading: true,
        searchModel: {
          pageDto: {
            pageSize: 10,
            pageNum: 1,
            pageSizes: [10, 20, 30, 100]
          },
          name: ''
        },
        baseDto: {
          page: {
            total: 0
          }
        },
        selectedModel: {},
        defaultActiveName: 'DataSourceList',
        editableTabsValue: 'DataSourceList',
        editableTabs: [],
        tabIndex: 2,
        checkedDataList: [],
        dialogVisible1: false,
        dialogVisible2: false,
        dialogVisible3: false,
        dialogVisible4: false,
        dialogVisible5: false
      }
    },
    created: function() {
      this.listPage()
    },
    methods: {
      handleSelectionChange: function(val) {
        this.checkedDataList = val
      },
      listPage: function() {
        Vue.$ajax({
          method: 'post',
          url: Vue.$adminServerURL + '/web/v1/DataSourceController/listPage',
          data: this.searchModel
        }).then(res => {
          this.loading = false
          if (res.data.flag === 'SUCCESS') {
            this.baseDto = res.data
          } else {
            if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
              this.$message({
                message: res.data.message,
                type: 'warning'
              })
            }
          }
        })
      },
      pageSizeChange: function(e) {
        this.searchModel.pageDto.pageSize = e
        this.listPage()
      },
      pageIndexChange: function(e) {
        this.searchModel.pageDto.pageNum = e
        this.listPage()
      },
      search: function(p) {
        if (!p.isCollapse) { // 非高级查询，则只需要根据关键字查询
          this.searchModel.name = p.searchKey
        } else {
          this.searchModel = p.searchModel
        }
        this.searchModel.pageDto.pageNum = 1
        this.loading = true
        this.listPage()
      },
      create: function() {
        this.addTab('新建XXX', 'CreateDataSource', 'create')
      },
      updateJdbc: function() {
        if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
          this.$message({
            message: '请选择一条数据',
            type: 'warning'
          })
          return
        }
        this.selectedModel = this.checkedDataList[0]
        this.dialogVisible1 = true
      },
      deleteById: function() {
        if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
          this.$message({
            message: '请选择一条数据',
            type: 'warning'
          })
          return
        }

        let data = this.checkedDataList[0]

        this.$confirm('您确定删除该记录吗？', '询问', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          Vue.$ajax({
            method: 'delete',
            url: Vue.$adminServerURL + '/web/v1/DataSourceController/' + data.id
          }).then(res => {
            this.loading = false
            if (res.data.flag !== 'SUCCESS') {
              this.$message({
                message: res.data.message,
                type: 'warning'
              })
            } else {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
              this.listPage()
            }
          })
        }).catch(() => {})
      },
      tableSharding: function (){
      },
      addTab: function(label, name, key) {
        let ele = {
          label: label,
          name: name,
          key: key
        }
        let flag = false

        for (let i = 0; i < this.editableTabs.length; i++) {
          let var1 = this.editableTabs[i]
          if (var1.name === name) {
            flag = true
            break
          }
        }

        if (!flag) {
          this.editableTabs.push(ele)
        }
        this.editableTabsValue = name
      },
      removeTab: function(targetName) {
        let tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              } else {
                activeName = this.defaultActiveName
                this.listPage()
              }
            }
          })
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      },
      clickTab: function(tab) {
        if (tab.name === this.defaultActiveName) {
          this.listPage()
        }
      },
      handleClose(done) {
        this.$confirm('确认关闭？').then(_ => {
            done();
          }).catch(_ => {});
      }
    }
  }
</script>
